﻿<template>
    <div>
        <div class="layout-main">
            <el-row style="margin-bottom:12px">
                <el-button v-on:click="add()" size="small" type="primary">添加</el-button>
            </el-row>
            <el-form ref="queryParams" inline label-position="right" label-width="120px" v-model="queryParams">
               
                <el-form-item label="公司/部门">
                    <el-input size="small"  @keyup.enter.native="search()"   v-model="queryParams.name" placeholder="公司或者部门名称" style="width: 140px" />
                </el-form-item>
                <el-form-item label="联系人">
                    <el-input size="small"  @keyup.enter.native="search()"   v-model="queryParams.linkMan" placeholder="联系人" style="width: 140px" />
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input size="small"  @keyup.enter.native="search()"   v-model="queryParams.phone" placeholder="联系电话" style="width: 140px" />
                </el-form-item>
                <el-form-item>
                    <el-button size="small" v-on:click="search()" type="primary">搜索</el-button>
                    <el-button size="small" v-on:click="reset()">重置</el-button>
                </el-form-item>
            </el-form>
            
            <el-table size="small" :data="sysBranchs" border style="width: 100%" v-loading="loading">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column align="center" prop="parentId" label="所属上级">
                    <template slot-scope="scope">
                        <template v-if="scope.row.top==1">
                            <el-tag type="success" effect="dark">
                                总公司
                            </el-tag>
                        </template>
                        <template v-else>
                            {{scope.row.parentName}}
                        </template>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="name" label="公司或部门名">
                </el-table-column>
                <el-table-column align="center" prop="type" label="类型">
                    <template slot-scope="scope">
                        <template v-if="scope.row.type==1">
                            {{scope.row.top==1?"总公司":"子公司"}}
                        </template>
                        <template v-else>
                            部门
                        </template>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="linkMan" label="联系人">
                </el-table-column>
                <el-table-column align="center" prop="phone" label="联系电话">
                </el-table-column>

                 <el-table-column align="center" prop="state" label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.state==1" class="state-success-full">
                            启用
                        </span>
                        <span class="state-info-full" v-else>禁用</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="id" label="操作">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.top==0" type="danger" @click="doDelete(scope.row)" size="small">删除</el-button>
                        <el-button type="primary" @click="edit(scope.row)" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :page-size="page.pageSize" show-total :total="page.total" :current="page.current" @on-change="changePage"></Page>
                </div>
            </div>
        </div>
        <CSysBranchDialog ref="sysBranchDialog" @cancel="getList()" @ok="getList()" />
    </div>
</template>
<script>
import CSysBranchDialog from "./CSysBranchDialog.vue"
export default {
    name: 'SysBranch',
    components: {
        CSysBranchDialog
    },
    data() {
        return {
            loading: false,

            queryParams: {

            },
            others: {

            },
            sysBranch: {

            },
            page: {
                total: 0,
                current: 1,
                pageSize: 10
            },
            sysBranchs: [

            ],
            rules: {}
        };
    },
    mounted: function() {
        this.getList();

    },
    methods: {
        cbtime: function(value) {
            this.others;
        },
        search: function() {
            this.page.current = 1;
            this.page.total = 0;
            this.getList();
        },
        reset: function() {
            this.queryParams = {};
            this.search();
        },
        changePage(current) {
            this.page.current = current;
            this.getList();
        },
        getList: function() {
            var me = this;
            var params = me.queryParams;
            params.current = me.page.current;
            params.pageSize = me.page.pageSize;
            me.loading = true;
            me.$http.post("/sys/sysbranch/getList.action", params).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.page.total = body.obj.totalCount;
                    me.sysBranchs = body.obj.list;

                }
                me.loading = false;
            }, response => {
                me.loading = false;
            });
        },
        doDelete: function(id) {
            var me = this;
            me.$Modal.confirm({
                title: "提示",
                content: "是否执行该操作",
                onOk: function() {
                    me.$http.post("/sys/sysbranch/doDelete.action", { id: id }).then(response => {
                        var body = response;
                        if (body.status == 0) {
                            me.getList();

                        } else {
                            me.$errorMessage(body.info);
                        }
                    }).catch(error => {

                    });
                },
                onCancel: function() {

                }
            });
        },
        edit: function(row) {
            this.sysBranch = row;
            this.$refs['sysBranchDialog'].showDialog(row.id);
        },
        add: function() {
            this.sysBranch = {};
            this.$refs['sysBranchDialog'].showDialog("");
        }

    }
}
</script>
<style scoped>
</style>